# ============================================
# 知识点
# ============================================
# 前端框架Bootstrap
# 该框架已经帮你写好了很多页面样式，你如果需要使用，只需要下载它对应文件，之后直接
# cv拷贝即可
# 在使用Bootstrap的时候所有的页面样式都只需要你通过class来调节即可
# 版本选择建议使用v3版本: https://v3.bootcss.com/
# 注意
# bootstrap的js代码是依赖于jQuery的，也就意味着你在使用Bootstrap动态效果的时候，
# 一定要导入jQuery 
# ============================================
# 布局容器
# <div class=" container">
# 左右两侧有留白
# </div>
# <div class=" container-fluid">
# 左右两侧没有留白
# </div>
# ============================================
# 栅格系统
# <div class=" row"></div>
# 写一个row就是将所在的区域划分成12份
# <div class="col-md-6 ">获取你所要的份数
# #在使用bootstrap的时候脑子里面一-定要做12的加减法
# 栅格参数
# .co1-xs-  手机
# .col-sm-  平板
# .col-md-  中等屏幕
# .col-lg-  超大屏幕
# #针对不同的显示器bootstrap会自动选择对应的参数
# #如果你想要兼容所有的显示器你就全部加上即可
# col-md-offset-2 从左往右移动几位
# ============================================
# 排版与代码
# 参考 https://v3.bootcss.com/css/#type
# ============================================
# 表格
# <table class="table table-hover table-striped table-bordered">
# <tr class= " success ">
# <td>1</td>
# <td> jason</td>
# <td>123</td>
# <td>study</td>
# </tr>
# <tr class= "active">. ..</tr>
# <tr class= "success">.. .</tr>
# <tr class= "warning">.. .</tr>
# <tr class="danger">...</tr>
# <tr class="info">...</tr>
# ============================================
# 表单
#针对表单标签加样式就用form-control
# <input type= "checkbox">222
# <input type= "radio">333
# checkbox和radio我们一般不会给它加form-control,直接使用原生的即可
#针对报错信息可以加has-error (input的父标签加)
# <p class="has-error">
# username :<input type="text" class=" form-control">
# </p>
# ============================================
# 按钮
# a标签加btn 就可以为按钮样式
# <a href=" https: / /www . mzitu. com/" class="btn btn-primary">点我</a>
# <button class="btn btn-danger">按我< /button>
# <button class= "btn btn-default">按我</button>
# <button class="btn btn-success"> 按我</ button>
# <button class= "btn btn- info">按我</button>
# <button class="btn btn-warning"> 按我</ button>
# 按钮尺寸
# <button class="btn btn-warning btn-1g"> 按我</button>
# <button class="btn btn- -warning btn-sm"> 按我</button>
# <button class="btn btn-warning btn-xs ">按我</button>

# <input type=”submit" class= "btn btn-primary btn-block">
# 通过给按钮添加. btn-block类可以将其拉伸至父元素100的宽度，而且按钮也变为了块级
# (block)元素。
# ============================================ 
# 图片
# <img src="..." alt="..." class="img-rounded">
# <img src="..." alt="..." class="img-circle">
# <img src="..." alt="..." class="img-thumbnail">
# ============================================ 
# 组件
# 图表
# 直接用span标签调用类即可（支持修改和文字一样）
# <h2 class="text-center"> 登陆页面<span class="glyphicon glyphicon-user ">
# </ span></h2>
# <style>
# span {
# I
# color: greenyellow;
# </style>
# pull-right 右浮动 pull-left 左浮动
# 图标样本
# http://fontawesome.com.cn/
# ============================================
# 导航条
# <nav class=" navbar navbar-inverse">
# <nav class= " navbar navbar-default">  改变默认颜色
# ============================================
# 分页器
# 加active变动态
# <nav aria-label="Page navigation">
# <ul class= "pagination">
# <li>
# ka href="#" aria-label="Previous">
# <span aria-hidden=" true">&laquo;</ span>
# </a>
# </1i>
# <li class=" active"><a href="#">1</a></1i>
# <1i><a hrefr"#">2</a></1i>
# <1i><a href="#">3</a></1i>
# <1i><a href="#">4</a></1i>
# <li><a href="#">5</a></li>
# <li>
# ka href="#" aria-label=" Next">
# <span aria-hidden= "true">&raquo;</ span>
# </a>
# </li>
# </ul>
# </nav>
# ============================================
# 组件
# 都去copy
# 弹框
# https://lipis.github.io/bootstrap-sweetalert/
# swal('你还好吗? ')
# undefined
# swal('你还好吗? ')
# undefined
# swal('你还好吗?', ' 我不好，想你了!')
# undefined
# swal('你还好吗?', '我不好，想你了!'，'success' )
# undef ined
# swal('你还好吗?', '我不好，想你了!', 'warning' )
# undefined
# swal('你还好吗?', '我不好，想你了!'，'error')
# undefined
# swal('你还好吗?', '我不好，想你了!'，' info')
# undefined
# #我们在后面的课程中还会涉及到该部分内容

# 进度条
# <script>
# function func(i){
# Let tempWidth = 'width:' + i + '%' // styLe
# Let contentText = i + '%' // 文本
# $( ' #d2 ' ).attr( 'styLe ' , tempWidth) . text (contentText)
# }
# $( ' #d1' ) . click(function () {
# for(Let i=0;i<101;i++){
# setInterval(func (i), 5000)
# }
# I
# })
# ============================================